<template>
  <div class="full-height bg-panda-dark-dark">
    <!-- <span style="color: #fff;margin-left: 30px;">{{editing_obj_id}}</span> -->
    <div class="q-px-md q-py-sm bg-panda-dark-dark d-flex just-betwwen" style="padding: 20px 10px 10px;">
      <q-input
        filled
        rounded
        color="panda-text-dark"
        bg-color="panda-light-light"
        dense
        class="text-panda-text-dark"
        v-model="queryform_form.fast_search"
        placeholder="输入球队名/球队ID"
        style="width:220px"
      >
        <template v-slot:prepend>
          <q-icon name="search" class="text-panda-text-light" />
        </template>
      </q-input>
      <q-btn class="panda-btn-light-dense" label="搜索" @click="tosearch_queryform()" />
    </div>
    <!-- <div class="row q-px-md q-my-sm justify-between bg-panda-dark-dark">
      <q-select
        filled
        rounded
        color="panda-text-light"
        bg-color="panda-light-light"
        style="width: 200px; "
        v-model="queryform_form.tournamentLevel"
        hide-bottom-space
        :options="match_level_constant"
        emit-value
        map-options
        dense
        options-dense
        popup-content-class="bg-panda-light-light text-panda-text-light"
      >
        <template v-slot:before>
          <span class="text-panda-text-dark">联赛级别</span>
        </template>
      </q-select>
      <div>
        <q-btn class="panda-btn-light-dense" label="搜索" @click="tosearch_queryform()" />
      </div>
    </div> -->
    <q-scroll-area
      class="bg-panda-light"
      ref="scrollArea"
      :style="`height:${scroll_area_height}px;`"
    >
      <q-scroll-observer @scroll="scroll_area_scroll" />

      <div
        class="row line-height-36px border-bottom panda-border panda-table-tr-like"
        @hover="()=>{}"
        v-for="(item,index) in match_list_data"
        :key="index"
        :class="compute_table_tr_like_class(item)"
        @click="to_edit(item)"
      >
        <div class="col-12 q-px-md justify-between">
          <div class="inline-block">
            <!-- <span
              class="panda-border panda-border-green panda-text-green border-radius-2px panda-level-button-like inline-block text-center q-mr-sm"
            >{{ show_sliced_level_label(item)}}</span> -->
            <span class="inline-block text-panda-text-light q-ml-sm">{{item.tournamentManagerId}}</span>
          </div>
          <span
            class="inline-block text-panda-text-light float-right"
            style="    max-width: 140px;overflow: hidden; text-overflow: ellipsis;  white-space: nowrap; "
            :title="item.tournamentName.zs"
          >{{item.tournamentName.zs}}</span>
        </div>
      </div>
    </q-scroll-area>
  </div>
</template>

<style lang="stylus" scoped>
.panda-level-button-like {
  height: 18px;
  width: 32px;
  line-height: 18px;
}
</style>


<script>
import { mapGetters, mapActions } from "vuex";
import { api_match } from "src/api/index.js";
import mixins from "src/mixins/index.js";
import matchmixin from "src/mixins/pages/match/match.js";

import { match_resource_tabledata } from "src/mock/match/index.js";
export default {
  mixins: [...mixins, matchmixin],
  data() {
    return {
      match_list_data: [],

      queryform_form: {},
      page: 1,
      queryform_module: {
        tournamentLevel: "",
        tournamentManagerId: "",
        tournamentManagerIdStatus: "",
        tournamentName: "string",
        fast_search: ""
      },
      scroll_area_height: ""
    };
  },
  created() {},
  props: {
    editing_obj: "",
    refresh_minilist: "",
    minilist_item_can_click: {
      default: 1
    },
    editing_obj_id: "" // 选择的数据 id
  },

  watch: {
    refresh_minilist() {
      this.page = 1;
      if (this.refresh_minilist == 1) {
        this.init_match_list_data();
      }
    }
  },
  created() {
    this.init_match_list_data();
  },
  methods: {
    init_match_list_data() {
      let params = this.compute_init_tabledata_params();
      params = this.delete_empty_property_with_exclude(params);
      api_match
        .post_tournament_queryTour(params)
        .then(res => { // 联赛管理  显示在左边组件的   赛事信息   好多条
          this.init_tabledata_after();
          console.log(
            this.editing_obj_id,
            11111111111111111111111,
            this.editing_obj
          );
          let arr =
            this.find_value_in_obj_bypath(res, "res.data.data.records") || [];
          arr.map(x => {
            x.is_selected = false;
            if (x.id == this.editing_obj_id) {
              x.is_selected = true;
            }
          });

          console.log("左侧 小列表 加工后的列表数据");
          console.log(arr);
          if (this.page == 1) {
            this.match_list_data = arr;
          } else {
            this.match_list_data = this.match_list_data.concat(arr);
          }
          this.$forceUpdate();
        });
    },

    scroll_area_scroll(info) {
      let po = this.$refs.scrollArea.getScrollPosition();
      // console.log(this.match_list_data.length);
      let len = this.match_list_data.length;
      let hall = len * 36;

      if (info.direction == "down") {
        if (
          hall > this.scroll_area_height &&
          info.position + this.scroll_area_height > hall - 100
        ) {
          this.page++;
          this.init_match_list_data();
        }
      }
    },
    compute_init_tabledata_params() {
      let params = {
        page: this.page,
        size: 100,
        onlyStandard: 1,
        tournamentLevel: this.queryform_form.tournamentLevel
      };

      if (this.queryform_form.dataSourceCode_all) {
        delete params.dataSourceCode;
      }
      if (Number(this.queryform_form.fast_search) > 0) {
        params.tournamentManagerId = this.queryform_form.fast_search;
      } else {
        params.tournamentName = this.queryform_form.fast_search;
      }
      console.log(params);
      return params;
    },

    compute_scrollarea_style() {
      let hs = this.window_size_info.height - 36 - 30 - 30;
      this.scroll_area_height = hs;
    },

    to_edit(item) {
      console.log(item);
      item.is_selected = true;
      // this.editing_obj = item;
      if (this.minilist_item_can_click == 1) {
        this.$emit("toedit", item);
      }
    },
    compute_table_tr_like_class(item) {
      let str = "";

      if (this.editing_obj && item.id == this.editing_obj.id) {
        str = "bg-panda-dark-light";
      }
      return str;
    },

    show_sliced_level_label(item) {
      let str = this.filter_value_to_label("match_level", item.tournamentLevel);
      if (str) {
        return str.slice(0, 2);
      }
    },
    tosearch_queryform() {
      this.init_match_list_data();
    }
  }
};
</script>
